{% comment %} <!-- templates/main/message_board.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style>
        /* 基本样式：留言块、表单等 */
        .message-box {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .message-box p {
            margin: 5px 0;
        }
        .message-box .user-id {
            font-weight: bold;
        }
        .message-box .created-at {
            font-size: 0.9em;
            color: #999;
        }
        .form-container {
            margin-top: 20px;
        }
        .form-container input, .form-container textarea {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
        }
        .delete-button {
            color: red;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1>留言板</h1>

    <!-- 留言列表 -->
    <div class="messages">
        {% for message in messages %}
            <div class="message-box">
                <p class="user-id">{{ message.user_id }}</p>
                <p>{{ message.content }}</p>
                <p class="created-at">留言时间：{{ message.created_at }}</p>

                {% if request.user.is_staff %}
                    <!-- 如果是管理员，显示删除按钮 -->
                    <a href="{% url 'main:delete_message' message.id %}" class="delete-button">删除</a>
                {% endif %}
            </div>
        {% empty %}
            <p>暂时没有留言。</p>
        {% endfor %}
    </div>

    <!-- 留言表单 -->
    <div class="form-container">
        <h2>添加留言</h2>
        <form method="POST">
            {% csrf_token %}
            {{ form.as_p }}  <!-- 自动渲染表单 -->
            <button type="submit">提交留言</button>
        </form>
    </div>

</body>
</html> {% endcomment %}
